<template>
    <div>
        <el-card>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-input placeholder="请输入手机号"  class="input-with-select" v-model="queryInfo.mobile" clearable @clear="getSmsList">
                        <el-button slot="append" icon="el-icon-search" @click="getMovieOrderList"></el-button>
                    </el-input>
                </el-col>
            </el-row>
            <el-table :data="smsList" border stripe>
                <el-table-column label="Id" prop="id"></el-table-column>
                <el-table-column label="手机" prop="mobile"></el-table-column>
                <el-table-column label="发送时间" prop="addTime"></el-table-column>
                <el-table-column label="发送内容" prop="content"></el-table-column>
                <el-table-column label="失败原因" prop="errmsg"></el-table-column>
            </el-table>

            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="queryInfo.pageNo" :page-sizes="[5, 10, 20]"
                :page-size="queryInfo.pageSize" layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
import Api from "@/api/Api.js";
export default {
    data() {
        return {
            queryInfo: {
                mobile: "",
                pageNo: 1,
                pageSize: 20, // 页大小
            },
            smsList: [],
            total: 0
        };
    },
    created() {
        this.getSmsList();
    },
    methods: {
        getSmsList() {
            Api.getSmsList(this.queryInfo).then((res) => {
                if (res.success) {
                    this.smsList = res.data.records;
                    this.total = res.data.total;
                } else {
                    return this.$message.error("获取列表失败");
                }
            });
        },
        handleSizeChange(pageSize) {
            this.queryInfo.pageSize = pageSize;
            this.getSmsList();
        },
        handleCurrentChange(pageNo) {
            this.queryInfo.pageNo = pageNo;
            this.getSmsList();
        }
    },
};
</script>

<style lang="less" scoped>
.logo_pic {
    max-width: 100px;
}
</style>
